<template>
	<view class="page-wrap">
		<view v-for="(pageItem, itemIndex) in pageItemList" :key="itemIndex" :class="{
				'swiper-view': pageItem.div_type === 'carousel',
				'menu-view': pageItem.div_type === 'buttons',
				'tab-list-view': pageItem.div_type === 'tablist'
			}">
			<SwiperCarousel :swiperList="swiperList" v-if="pageItem.div_type === 'carousel'" @clickSwiper="clickSwiper"
				:imgCol="'picUrl'"></SwiperCarousel>
			<SwiperMenu v-if="pageItem.div_type === 'buttons'" :menuList="pageItem.data"
				:menuLabel="pageItem.item_label" @clickMenu="clickMenu"></SwiperMenu>
			<TabList @clickListItem="clickListItem" @showMore="showMore($event, pageItem)"
				v-if="pageItem.div_type === 'tablist'" :pageItem="pageItem" :srvApp="tabListConfig['srvApp']"
				:contentService="tabListConfig['contentService']" :cateService="tabListConfig['cateService']"
				:contentTemplate="tabListConfig['contentTemplate']"></TabList>
		</view>
	</view>
</template>

<script>
	import TabList from '@/components/bx-tablist/bx-tablist.vue';
	import SwiperCarousel from '@/components/bx-swiper/bx-swiper.vue';
	import SwiperMenu from '@/components/bx-swiper-menu/bx-swiper-menu.vue';
	export default {
		components: {
			TabList,
			SwiperCarousel,
			SwiperMenu
		},
		props: {
			website_no: {
				type: String,
				default: ''
			},
			page_no: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				scrollTop: 0,
				TabCur: 0,
				scrollLeft: 0,
				dotStyle: true,
				pageItemList: [], //页面项列表，控制页面显示内容
				menuList: [], //按钮列表
				newsList: [], //新闻列表
				swiperList: [], //轮播图列表
				categoryList: [], //分类列表
				tabListConfig: {
					srvApp: 'daq',
					contentService: 'srvdaq_cms_content_select',
					cateService: 'srvdaq_page_item_tablist_select',
					contentTemplate: {
						imgCol: 'icon_image',
						titleCol: 'title',
						dateCol: 'create_time'
					}
				}
				// tabsList:{}
				// tabNewsList: [] //根据栏目分类的新闻列表
			};
		},
		created() {
			if (this.$route.query.website_no) {
				if (this.$route.query.page_no) {
					this.getPageItemList(this.$route.query.website_no, this.$route.query.page_no);
				}
				// else{
				//   this.getPageItemList(this.$route.query.website_no);
				// }
			} else {
				// this.getPageItemList('WS2020031216030001','BX202003191357520001');
			}
			this.tabListConfig.srvApp ? uni.setStorageSync('activeApp', this.tabListConfig.srvApp) : '';
			// this.getPageItemList();
		},
		mounted() {},
		computed: {
			tabNewsList() {
				//根据栏目分类的新闻列表
				let NewsList = [];
				let tabNewsList = [];
				this.categoryList.forEach((cate, index) => {
					tabNewsList[index] = [];
					this.newsList.forEach(listItem => {
						if (cate.no === listItem.cate_no) {
							tabNewsList[index] = tabNewsList[index].concat([listItem]);
							NewsList[index] = {};
							NewsList[index]['data'] = tabNewsList[index];
							NewsList[index]['name'] = listItem.cate_name;
						}
					});
				});
				return NewsList;
			}
		},
		methods: {
			getPageInfo(website_no, page_no) {
				if (page_no && website_no) {
					this.getPageItemList(website_no, page_no);
				}
			},
			showMore(e, pageitem) {
				console.log('点击了更多按钮', e, pageitem);
				uni.navigateTo({
					url: '/pages/specific/newsList/newsList?cate_no=' + e.no
				});
			},
			tabSelect(e) {
				//点击tab
				this.TabCur = Number(e.currentTarget.dataset.id);
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
			},
			clickSwiper(e) {
				// 点击了轮播图
				console.log('点击了轮播图,', e);
			},
			clickMenu(e) {
				// 菜单按钮点击事件
				console.log('点击了按钮：', e);
				if (e.type && e.type === 'more') {
					// 点击了更多按钮
					console.log('点击了更多按钮');
					uni.navigateTo({
						url: '/pages/public/home/home'
					});
				} else if (e.type && e.type === 'health') {
					uni.navigateTo({
						url: '/pages/specific/symptom/symptom'
					});
				} else if (e.dest_page) {
					if (e.dest_app) {
						uni.setStorageSync('activeApp', e.dest_app);
					} else if (uni.getStorageSync('activeApp')) {
						e.dest_app = uni.getStorageSync('activeApp');
					}
					if (e.app_temp_col_map) {
						uni.navigateTo({
							url: e.dest_page + '&destApp=' + e.dest_app + '&viewTemp=' + e.app_temp_col_map
						});
					} else {
						uni.navigateTo({
							url: e.dest_page + '&destApp=' + e.dest_app,
							fail(res) {
								if (res.errMsg) {
									window.location.href = e.dest_page;
								}
							}
						});
					}
				}
			},
			clickListItem(e) {
				// 列表点击事件
				console.log('点击了列表项：', e);
				uni.navigateTo({
					url: `/pages/specific/article/article?serviceName=srvdaq_cms_content_select&content_no=${e.content_no}&cate_name=${e.cate_name}`
					// url: '/pages/specific/article/article?article=' + encodeURIComponent(JSON.stringify(e))
				});
			},
			// async getPageList(website_no){
			//   let url = this.getServiceUrl('daq', 'srvdaq_website_page_select', 'select');
			//   let req = {
			//     serviceName: 'srvdaq_website_page_select',
			//     colNames: ['*'],
			//   };
			//   let res = await this.$http.post(url, req);
			//   if(res.data.state==="SUCCESS"&&res.data.data.length>0){
			//     this.getPageItemList(res.data.data[0].website_no)
			//   }
			// },
			async getPageItemList(website_no, page_no) {
				//获取页面项列表
				let url = this.getServiceUrl('daq', 'srvdaq_website_page_item_select', 'select');
				let req = {
					serviceName: 'srvdaq_website_page_item_select',
					colNames: ['*'],
					order: [{
						colName: 'seq',
						orderType: 'asc'
					}]
				};
				if (website_no && page_no) {
					req.condition = [{
						colName: 'website_no',
						ruleType: 'eq',
						value: website_no
					}, {
						colName: 'page_no',
						ruleType: 'eq',
						value: page_no
					}];
				} else {
					return;
				}
				let res = await this.$http.post(url, req);
				if (res.data.state === 'SUCCESS') {
					this.pageItemList = res.data.data;
					res.data.data.map((item, index) => {
						switch (item.div_type) {
							case 'buttons':
								item['componentsType'] = 'SwiperMenu';
								break;
							case 'carousel':
								item['componentsType'] = 'SwiperCarousel';
								break;
							case 'tablist':
								item['componentsType'] = 'TabList';
								break;
								return;
						}
						this.getPageItem(item).then(data => {
							item['data'] = data;
							this.$set(this.pageItemList, index, item);
						});
						return item;
					});
					return res.data.data;
				}
			},
			async getPageItem(item = {}) {
				// 获取页面项
				let serviceName = '';
				switch (item.div_type) {
					case 'buttons':
						serviceName = 'srvdaq_page_item_buttons_select';
						break;
					case 'carousel':
						serviceName = 'srvdaq_page_item_carousel_select';
						break;
					case 'tablist':
						serviceName = 'srvdaq_cms_content_select';
						return;
						break;
				}
				if (item.div_type === 'tablist' && serviceName) {
					let urls = this.getServiceUrl('daq', serviceName, 'select');
					let reqs = {
						serviceName: serviceName,
						colNames: ['*'],
						group: [{
							colName: 'no',
							type: 'by'
						}],
						order: [{
							colName: 'seq',
							orderType: 'asc'
						}]
					};
					let ress = await this.$http.post(urls, reqs);
					if (ress.data.state === 'SUCCESS') {
						this.categoryList = ress.data.data;
					}
				}
				if (serviceName && item.item_no) {
					let url = this.getServiceUrl('daq', serviceName, 'select');
					let req = {
						serviceName: serviceName,
						colNames: ['*'],
						condition: [{
							colName: 'item_no',
							ruleType: 'eq',
							value: item.item_no
						}],
						order: [{
							colName: 'seq',
							orderType: 'asc'
						}]
					};
					// if(item.div_type==='buttons'){
					// 	req.condition.push({
					// 		colName:"display",
					// 		ruleType:'ne',
					// 		value:"隐藏"
					// 	})
					// }
					let res = await this.$http.post(url, req);
					if (res.data.state === 'SUCCESS') {
						let itemList = res.data.data;
						itemList.forEach((pageitem, index) => {
							switch (item.div_type) {
								case 'buttons':
									res.data.data = res.data.data.filter(btn => btn.display !== '隐藏')
									let itemLists = [];
									if (itemList.length <= 8) {
										// itemLists = [[...itemList]];
										itemLists = [itemList];
									} else if (itemList.length > 8 && itemList.length <= 16) {
										itemLists = [itemList.slice(0, 8), itemList.slice(8)];
									} else if (itemList.length > 16) {
										itemLists = [itemList.slice(0, 8), itemList.slice(8, 16)];
									}
									this.menuList = itemLists;
									break;
								case 'carousel':
									pageitem['picUrl'] = this.$api.serverURL + '/file/download?fileNo=' +
										pageitem.carousel_image;
									this.$set(itemList, index, pageitem);
									this.swiperList = itemList;
									break;
								case 'tablist':
									// this.newsList = itemList;
									// this.getPictureUrl(pageitem.icon_image).then(url => {
									//   pageitem['picUrl'] = url;
									//   this.$set(itemList, index, pageitem);
									//   this.newsList = itemList;
									// });
									// this.getCategoryList(pageitem.no).then(data => {
									//   pageitem['cate_name'] = data.cate_name;
									//   pageitem['cate_no'] = data.no;
									//   this.$set(itemList, index, pageitem);
									//   this.newsList = itemList;
									// });
									break;
							}
							itemList = res.data.data;
						});
						return itemList;
					}
				}
			},
			async getCategoryList(no) {
				//根据分类编号查询对应分类
				const url = this.getServiceUrl('daq', 'srvdaq_cms_category_select', 'select');
				const req = {
					serviceName: 'srvdaq_cms_category_select',
					queryMethod: 'select',
					colNames: ['*'],
					condition: [{
						colName: 'no',
						value: no,
						ruleType: 'eq'
					}]
				};
				let res = await this.$http.post(url, req);
				if (res.data.state === 'SUCCESS' && res.data.data.length > 0) {
					let data = res.data.data[0];
					return data;
				}
			},
			async getPictureUrl(file_no) {
				const serviceName = 'srvfile_attachment_select';
				const url = this.getServiceUrl('file', serviceName, 'select');
				const req = {
					serviceName: serviceName,
					colNames: ['*'],
					condition: [{
						colName: 'file_no',
						value: file_no,
						ruleType: 'eq'
					}]
				};
				if (file_no !== null && file_no !== '' && file_no !== undefined) {
					let res = await this.$http.post(url, req);
					if (res.data.state === 'SUCCESS') {
						const data = res.data.data[0];
						if (data) {
							const fileurl = this.$api.srvHost + '/file/download?filePath=' + data.fileurl;
							return fileurl;
						}
					}
				}
			}
		},
		watch: {
			pageItemList: {
				deep: true,
				handler(newVal) {
					// console.log(newVal);
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	@media screen and (min-width: 750px) {
		.page-wrap {
			position: relative;
			overflow: hidden;
			display: flex;
			flex-wrap: wrap;
			max-width: 1366px;
			margin: 0 auto;

			.swiper-view {
				width: 100%;
				min-height: 500px;
				max-width: 1350px;
				max-height: 700px;
				margin: 0 auto;

				.carousel-view {
					width: 100%;
					height: 100%;

					/deep/.screen-swiper {
						height: 100%;
					}
				}
			}

			.menu-view {
				width: 100%;
				max-width: 350px;
				margin: 0 auto;

				/deep/ .screen-swiper {
					width: 100%;
				}
			}

			.tab-list-view {
				max-width: 450px;
				margin: 10px auto;
			}
		}
	}

	.page-wrap {
		position: relative;
	}
</style>
